<ion-header>
  <ion-navbar color="primary">
    <ion-title>
      新待办事项
    </ion-title>
    <ion-buttons end>
    <button ion-button icon-left (click)="addTask()" >
      <ion-icon name="add-circle"></ion-icon>
      新增</button>
  </ion-buttons>
   
  </ion-navbar>
</ion-header>

<ion-content padding>
<ion-refresher (ionRefresh)="doRefresh($event)" >
  <ion-refresher-content
  pullingIcon="arrow-dropdown"
  pullingText="下拉刷新"
  refreshingSpinner="circles"
  refreshingText="刷新......."
  >
  </ion-refresher-content>
</ion-refresher>

 <ion-list>
   <ion-item-sliding #slidingItem *ngFor="let task of tasks" >
      <ion-item [ngClass]="{'task_done': task.status === 'done'}" (click)="editTask(task)">
        {{task.title}}</ion-item>
      <ion-item-options side="right" (ionSwipe)="removeTask(task)" >
        <button ion-button icon-only color="secondary" (click)="markAsDone(slidingItem,task)">
          <ion-icon name="checkmark"></ion-icon>
        </button>
        
        <button expandable ion-button icon-only color="danger" (click)="removeTask(task)">
          <ion-icon name="trash"></ion-icon>
        </button>
      </ion-item-options>
   </ion-item-sliding>
 </ion-list>

</ion-content>
